<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    display: flex;
      // flexbox box flex
      flex中项目是沿着主轴排列
    flex-direction
      row 默认值
      row-reverse  
        横轴为主轴，同时flex-start在右边
      column
        纵轴为主轴
      column-reverse 
        纵轴为主轴，flex-start在下面

    flex-wrap 在主轴上是否换行
      nowrap  默认值 不换行会直接被压缩
      wrap  换行
      wrap-reverse 反向换行（行的顺序相反）
    
    flex-flow
      flex-direction flex-wrap 复合属性
      row nowrap
    
    justify-content
      flex-start  项目在主轴上排列到flex-start位置
      flex-end 项目在主轴上排列到flex-end位置
      center 项目在容器中间
      space-between 
        两边贴边，元素和元素间的间隔相同
      space-around
        每个元素两边的空白区域都相同
      space-evenly 兼容很差
        和around类似，每个元素间的间隔都是一致的
    align-items
        项目在副轴上的排列方式
      flex-start
      flex-end
      center
      stretch
        默认如果说元素在副轴上没有距离



   -->
</body>
</html>